<template>
  <view class="container">
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item >
        <navigator class="swiper-item" >
          <image src="" mode="widthFix"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 分类导航区域 -->
    <view class="category-container">
      <view class="category-box">
        <!-- 每一项 -->
        <view class="category-list" >
          <navigator class="category-column">
            <image src="" class="category-imgbox" mode=""></image>
            <view class="category-title"></view>
          </navigator>
        </view>
      </view>
    </view>

    <!-- 秒杀 -->
    <view class="miaoshaGoods">
      <view class="ttt">
        <view class="l">
          <view class="u-line"></view>
        </view>
        <view class="content">
          <image src="../../static/images/miaosha.png" mode=""></image>
          <view class="innertxt">限时秒杀</view>
        </view>
        <view class="l">
          <view class="u-line"></view>
        </view>
      </view>
      <!-- 秒杀列表 -->
      <navigator  class="miaosha-goods-list" >
        <image  class="image" src="" mode=""></image>
        <view class="r">
          <!-- 秒杀标题 name-->
          <view class="goods-title">
          
          </view>
          <!-- 秒杀价格 minPrice 原始价格originalPrice-->
          <view class="miaosha-price-btn">
            <view class="price">
              ￥
              <text>￥</text>
            </view>
            
          </view>
        </view>
      </navigator>
    </view>
    
    <!-- 商品列表 -->
    <view class="goodslist">
        <view class="ttt">
          <view class="l">
            <view class="u-line"></view>
          </view>
          <view class="content">
            <image src="../../static/images/pingtuan.png" mode=""></image>
            <view class="innertxt">商品列表</view>
          </view>
          <view class="l">
            <view class="u-line"></view>
          </view>
        </view>
        <!-- 列表 -->
        <view class="goods-container" >
          <!-- 列表的每一项  图片字段是pic-->
          <navigator  class="goods-box" >
            <view class="img-box">
              <image src="" mode=""></image>
            </view>
            <view class="goods-title">
              <view class="">
                
              </view>
            </view>
            <view class="price-score">
              <view class="item">
                <text>￥</text>
                
              </view>
            </view>
          </navigator>
        </view>
        
    </view>
    

  </view>
</template>

<script>
  export default {
    data() {
      return {
      // 定义轮播图
      swiperList:[],
      
      }
    },
    onLoad() {
      //调用轮播图
      this.getswiperList()
    }
  },
  methods: {
    // 获取轮播图数据
    async getswiperList() {
      const{data:res} = await uni.$http.get('banner/list?type=index')
      if(res.ment.status ! == 200) {
        return uni.showToast({
          title:'数据请求失败',
          duration:1500,
          icon:'none'
        })
      }
      // 数据请求成功
      this.swiperList = res.message
    }
  },
</script>

<style lang="scss">
  .container{
    background-color: #fff;
  }
  swiper {
    height: 330rpx;
    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }

  .category-container {
    padding: 0 0 10px 0;
    margin-top: 16rpx;
    position: relative;
    background-color: white;

    .category-box {
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      box-shadow: 0px 0px 18px 0px rgba(5, 5, 5, 0.15);
      margin-left: 25rpx;
      margin-right: 25rpx;
      border-radius: 10px;
      padding: 20rpx 0;
      position: inherit;

      .category-list {
        width: 140rpx;
        text-align: center;
        display: inline-block;
        overflow: hidden;

        .category-column {
          width: 100%;
          margin-top: 20rpx;
          overflow: hidden;

          image {
            width: 100rpx;
            height: 100rpx;
          }

          .ti {
            font-size: 24rpx;
            text-align: center;
          }
        }
      }
    }
  }

  // 秒杀

  .miaoshaGoods {
    .ttt {
      display: flex;
      align-items: center;
      margin-top: 24rpx;

      .l {
        flex: 1;
        display: inline-block;

        .u-line {
          margin: 0;
          border-bottom-width: 1px;
          border-bottom-style: solid;
          width: 100%;
          transform: scaleY(0.5);
          border-color: #d6d7d9;
          
          vertical-align: middle;
          
          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          flex-grow: 0;
          flex-basis: auto;
          align-items: stretch;
          align-content: flex-start;
        }
      }

      .content {
        display: flex;
        align-items: center;
        padding: 0 16rpx;
        image{
            width: 34rpx;
            height: 42rpx;
        }
        .innertxt{
            margin-left: 16rpx;
            color: #333;
            font-size: 28rpx;
        }
      }

    }
    
    .miaosha-goods-list{
      margin: 20rpx;
      border-radius: 16rpx;
      display: flex;
      padding: 20rpx;
      .image{
          width: 260rpx;
          height: 260rpx;
          flex-shrink: 0;
          border-radius: 16rpx;
          display: inline-block;
          overflow: hidden;
      }
      .r{
        margin-left: 32rpx;
        .goods-title{
            color: #333;
            font-size: 28rpx;
        }
        .miaosha-price-btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .price{
                color: #e64340;
                font-size: 40rpx;
                margin-top: 12rpx;
                padding-right: 32rpx;
                text{
                  color: #666666;
                  font-size: 26rpx;
                  text-decoration: line-through;
                }
            }
        }
      }
    }
  }
  
  // 商品推荐
  .goodslist{
      .ttt {
        display: flex;
        align-items: center;
        margin-top: 24rpx;
      
        .l {
          flex: 1;
          display: inline-block;
      
          .u-line {
            margin: 0;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            width: 100%;
            transform: scaleY(0.5);
            border-color: #d6d7d9;
            
            vertical-align: middle;
            
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            flex-grow: 0;
            flex-basis: auto;
            align-items: stretch;
            align-content: flex-start;
          }
        }
      
        .content {
          display: flex;
          align-items: center;
          padding: 0 16rpx;
          image{
              width: 34rpx;
              height: 42rpx;
          }
          .innertxt{
              margin-left: 16rpx;
              color: #333;
              font-size: 28rpx;
          }
        }
      
      }
      
      // 列表
      .goods-container{
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          box-sizing: content-box;
          padding: 0 24rpx;
          .goods-box{
              width: 339rpx;
              background-color: #fff;
              overflow: hidden;
              margin-top: 24rpx;
              border-radius: 5px;
              border: 1px solid #D1D1D1;
              padding-bottom: 10rpx;
              .img-box{
                  width: 339rpx;
                  height: 339rpx;
                  overflow: hidden;
                  image{
                    width: 339rpx;
                    height: 339rpx;
                  }
              }
              .goods-title{
                  padding: 0 4rpx;
                  padding-top: 16rpx !important;
                  color: #333;
                  font-size: 28rpx;
                  display: -webkit-box !important;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  word-break: break-all;
                  -webkit-line-clamp: 3;
                  -webkit-box-orient: vertical !important;
              }
              .price-score{
                  display: flex;
                  color: #e64340;
                  font-size: 38rpx;
                  .item{
                        padding: 0 8rpx;
                        display: flex;
                        align-items: center;
                        text{
                          padding: 0 4rpx;
                          font-size: 28rpx;
                        }
                  }
              }
              
          }
      }
  }
</style>
